<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
    <button onclick="alert('点击了按钮1')">按钮1</button>
    <button id="btn">按钮2</button>
    <hr>
    <h4>今天星期一</h4>
    <span>震惊：</span>
    <h4>后台星期三</h4>
    <div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, aperiam autem doloremque, dolores est facere
        fugit ipsum laborum natus nemo non odit porro temporibus unde velit. Eius ex ipsam ratione.
      </div>
      <div>Ad culpa eius et iusto labore nam odit repudiandae, rerum, sit temporibus veritatis vitae. Expedita fugit
        ipsam maiores natus nesciunt nihil non odio quae recusandae sapiente suscipit, tempora voluptate voluptatibus.
      </div>
      <div>Architecto consectetur eius est incidunt, ipsum natus nihil nulla qui, quo sed tempore ullam veniam? Nobis
        reiciendis sit velit vitae voluptas. Eius eum nihil nobis praesentium, quas reiciendis sapiente sunt!
      </div>
      <div>Et, praesentium, suscipit? Et ipsa quo suscipit. Aliquam at, aut delectus eveniet ex explicabo facilis harum
        id illum impedit inventore iste laboriosam molestiae molestias natus nesciunt officia provident quam, veniam!
      </div>
      <div>Ad delectus hic, id in ipsum magnam, magni, minima nihil nostrum officiis qui sapiente unde? Ab beatae
        corporis dignissimos itaque natus officia pariatur quis repellat sit, velit. Architecto, eaque reiciendis?
      </div>
      <div>Amet cumque doloremque facere harum ipsa nostrum omnis perspiciatis quasi quibusdam rem sit sunt tempore
        unde, ut voluptates? A ab animi aperiam delectus esse, explicabo fuga illo maxime numquam quod!
      </div>
      <div>Eius molestiae optio velit. Architecto consectetur dignissimos eius error esse eum facilis id illum labore,
        mollitia nam, necessitatibus nisi, nobis perspiciatis quo. Architecto atque consequuntur doloremque expedita
        ipsa reprehenderit voluptatem!
      </div>
      <div>Blanditiis consequuntur, cupiditate dolorem eos minus mollitia nostrum praesentium quos ullam! Aut
        doloremque, harum iste itaque iusto laboriosam nemo nostrum perspiciatis quasi quo ratione rerum sit soluta sunt
        tenetur voluptatum.
      </div>
      <div>A ad adipisci aliquam asperiores aut cum ducimus expedita facere itaque iusto laudantium minima nobis odio
        officia omnis perspiciatis quaerat, qui, repellat repellendus sed sint sit tempore veritatis. Cupiditate, illum!
      </div>
      <div>A ad alias, aperiam atque, consequuntur culpa delectus eligendi ex fugiat labore modi molestias nam officiis
        optio praesentium quo rem repudiandae sed suscipit totam ut vel velit veniam voluptatibus voluptatum.
      </div>
      <div>A accusamus aliquam amet aut, consequatur consequuntur corporis culpa debitis deleniti dolore, earum,
        eligendi est ex facere minus nesciunt nulla odit officiis pariatur ratione reprehenderit vero voluptatem
        voluptates. Aliquam, asperiores!
      </div>
      <div>Ab atque consequuntur delectus earum eos nobis placeat quibusdam quo, sequi soluta. At deserunt ea eius ex
        inventore labore minima nostrum quasi, ratione, sed sit voluptas. Doloremque sequi unde ut!
      </div>
      <div>Consequuntur libero maxime officiis praesentium reiciendis temporibus. Consequatur corporis, esse et fuga
        hic, laudantium magni maiores nihil nulla numquam odio optio perspiciatis possimus reprehenderit voluptatem? A
        earum fugiat soluta voluptas.
      </div>
      <div>Animi corporis dicta enim facere itaque unde! Aspernatur fuga fugiat laboriosam omnis veniam, voluptate
        voluptatum. Accusamus ad architecto consequatur corporis, dolore eligendi enim ipsam itaque mollitia porro,
        quibusdam ut. Numquam.
      </div>
      <div>Aliquam beatae delectus error, explicabo minima non porro. Accusamus architecto asperiores consequatur
        laboriosam mollitia, necessitatibus, neque officia optio, quisquam rem temporibus tenetur totam voluptas!
        Accusamus at eius pariatur placeat reiciendis!
      </div>
      <div>Ad asperiores autem beatae consequatur corporis, cumque dolor ducimus eaque earum error harum in inventore
        maiores, modi natus nesciunt, officia perferendis possimus quam quia quos reiciendis reprehenderit repudiandae
        sunt suscipit!
      </div>
      <div>Dignissimos dolorem ipsa magnam nobis quia quo sunt suscipit tempore ullam voluptatum! Architecto autem
        consequatur, cum error exercitationem laborum, magnam maiores, odio officia porro quaerat repudiandae sed sit
        velit voluptates.
      </div>
      <div>A aspernatur assumenda consectetur debitis magni modi molestias obcaecati odit placeat quidem, voluptas
        voluptate? Atque consequuntur corporis dolores dolorum eum ipsam maiores minima perspiciatis quod reiciendis
        tempora ut vero, voluptatibus!
      </div>
      <div>Accusantium cum esse eveniet excepturi explicabo illo illum magni, nostrum perferendis perspiciatis possimus
        quisquam quod vero! Accusamus ad cumque doloribus ducimus ea eius error iusto, perferendis porro quas quod
        temporibus?
      </div>
      <div>Accusamus aperiam asperiores beatae cum cupiditate distinctio ea excepturi facilis fuga fugiat, hic itaque
        labore magni nam natus nesciunt non omnis perferendis perspiciatis quas qui repellendus, sint tempora veritatis
        voluptates!
      </div>
      <div>Aperiam, dicta enim laboriosam maiores molestiae officia sunt. Dolores fuga quibusdam sapiente. Alias dolorum
        omnis pariatur praesentium similique. A ad illo laboriosam laborum, molestias officia provident recusandae rem
        tempora voluptatibus!
      </div>
      <div>Accusamus amet doloremque ducimus est harum quaerat similique voluptates? Consequuntur eius quae quas. Fuga
        incidunt laudantium perspiciatis quo quos tenetur, voluptatibus. Blanditiis eius eligendi eum illo labore
        quaerat, rerum veniam.
      </div>
      <div>Culpa debitis dignissimos doloremque eius eligendi, et, exercitationem ipsum natus possimus quasi quisquam
        quos suscipit tenetur unde vel voluptate voluptatibus. Autem eum iste labore, numquam odio sed voluptate. Dolor,
        magnam.
      </div>
      <div>Eius laboriosam maiores odit porro quibusdam? Consequuntur dolores dolorum iste non quis. Animi beatae
        consectetur culpa distinctio eaque eius ipsam iure minima odio optio, sunt, voluptas. Earum enim placeat saepe.
      </div>
      <div>Amet animi dignissimos doloremque fugit hic illum ipsum molestias nostrum omnis optio, pariatur porro, quam
        repellat saepe sapiente, temporibus voluptas voluptates! A doloribus mollitia perferendis quis sapiente,
        suscipit unde voluptatibus.
      </div>
      <div>Adipisci architecto, cum, ea eveniet excepturi fugit, inventore labore laborum magnam minima obcaecati
        possimus provident quae quos repellendus sint sunt! Consequuntur culpa cupiditate eum nam nobis, perferendis sed
        temporibus unde.
      </div>
      <div>Adipisci aliquid dolorum earum officiis vero. Adipisci aperiam beatae consequatur dolore eligendi enim fugit
        incidunt ipsam, iste, maxime obcaecati officiis perspiciatis possimus praesentium sit suscipit tempore vitae?
        Laborum nam, temporibus.
      </div>
      <div>Aspernatur cupiditate deleniti deserunt earum, esse est eveniet exercitationem expedita explicabo fugit
        impedit inventore labore nemo obcaecati pariatur quam qui quod repellat similique ut vel velit voluptatibus?
        Ipsa, quam, sint.
      </div>
      <div>Aliquid exercitationem expedita inventore officiis quibusdam recusandae, sint tempore temporibus. Accusamus
        accusantium blanditiis dicta dolorem ducimus earum facilis illo incidunt inventore magni obcaecati officia
        optio, perferendis provident quidem recusandae sequi.
      </div>
      <div>Ad amet architecto aspernatur assumenda delectus dignissimos eligendi ex fuga hic, in iste laborum natus
        nihil nostrum officia, omnis porro quae quibusdam repellendus reprehenderit sapiente similique, suscipit vel
        velit veritatis?
      </div>
      <div>Accusamus accusantium eligendi enim est eveniet officia porro. Cumque cupiditate, enim, ex hic incidunt
        laboriosam mollitia nostrum, omnis sed sunt suscipit vel voluptates? Accusamus amet eius fugiat inventore, odio
        voluptatibus.
      </div>
      <div>At culpa dignissimos nostrum quod. Eos illum incidunt quae veniam vitae. Aliquam aliquid architecto commodi
        cupiditate deleniti error inventore iure nisi, placeat praesentium qui quod ratione rem reprehenderit
        voluptatem, voluptatum.
      </div>
      <div>Accusamus est nesciunt nisi numquam perspiciatis ratione temporibus! Alias corporis cupiditate dolore earum
        enim esse, eveniet fugiat ipsa labore modi necessitatibus non perferendis quasi quis sequi similique sint unde
        veritatis!
      </div>
      <div>Ad, alias aliquid consectetur consequatur corporis culpa cumque facere fuga non quia sapiente sequi velit
        voluptatibus? Amet doloribus eos est ipsa modi quod quos voluptatum. Delectus doloremque iste mollitia quod.
      </div>
      <div>At deleniti dolor doloribus dolorum earum esse hic impedit laudantium magni minus nemo nobis nulla porro
        quaerat quisquam, quo repellendus sed sit soluta veritatis. Eligendi id labore non quo voluptatibus.
      </div>
      <div>Et ipsam magnam minima officia perferendis sequi tempora tempore velit veniam! A, architecto dignissimos ea
        exercitationem ipsa natus nemo nostrum pariatur perferendis placeat porro repellendus tenetur vero vitae
        voluptates voluptatum.
      </div>
      <div>Aliquid consequatur debitis, illum in laborum molestiae mollitia, necessitatibus quibusdam rem sequi soluta,
        tempore. Delectus est facilis ipsum numquam officiis praesentium qui! Debitis excepturi fugit nemo porro quidem
        ullam, unde!
      </div>
      <div>A aliquam error est excepturi expedita impedit in ipsa itaque, mollitia nesciunt, non nostrum placeat
        quisquam ratione, repellat reprehenderit rerum sequi sunt. Doloremque inventore iusto odit qui quis sit veniam.
      </div>
      <div>Adipisci aperiam aut consectetur dolorem, doloremque dolores illum quasi, sapiente sed vero voluptas
        voluptatem! A aspernatur cupiditate debitis deserunt dolores eaque ipsum iste, quasi quia quis repellat sunt,
        tempore veritatis!
      </div>
      <div>Consequatur dolore fugiat quisquam! Deserunt harum quidem voluptates. Architecto debitis deleniti dolorem
        dolorum illum quidem reprehenderit rerum saepe tempore vero? Ab cumque dignissimos earum excepturi impedit magni
        nemo provident quae.
      </div>
      <div>Asperiores, commodi cumque doloribus ducimus excepturi inventore magnam maxime minima minus molestiae,
        molestias nulla perferendis quidem repudiandae ullam voluptas voluptatum? Aliquam, aspernatur assumenda commodi
        ex ipsa magni nulla placeat sequi.
      </div>
      <div>Ab aperiam culpa libero tempore veniam. Accusamus aliquid aperiam aspernatur culpa distinctio dolorem
        ducimus, eligendi eveniet fugiat id minima molestias nam non nulla perspiciatis possimus quas, quia repellendus
        ut voluptatibus?
      </div>
      <div>A adipisci aliquid commodi cumque cupiditate delectus, eos esse ex expedita ipsum laborum libero magnam minus
        necessitatibus nulla numquam possimus quisquam repellendus sit, tempore tenetur ullam unde vitae, voluptates
        voluptatum!
      </div>
      <div>Consequatur, ex, ullam. A accusantium architecto assumenda at dignissimos dolores explicabo fugiat labore
        maiores minima mollitia natus nesciunt, numquam odit, omnis, porro quo vitae voluptas! Adipisci deserunt
        explicabo inventore voluptates.
      </div>
      <div>Ab deleniti dolorum eius, eligendi fugiat iure iusto labore minima mollitia nulla odit quae recusandae
        reiciendis, repellat sequi sint tenetur veritatis voluptatem! Dignissimos ea eius expedita iusto, nam suscipit
        ullam?
      </div>
      <div>Aspernatur blanditiis nihil sed tenetur. Alias aspernatur, blanditiis culpa dicta dignissimos dolorum earum
        enim est expedita fugiat harum iusto laborum nemo nostrum, quia quo repellat sapiente. Beatae distinctio maiores
        odio.
      </div>
      <div>Pariatur, temporibus vero! Aspernatur autem dolorum eligendi facere in molestias, nobis quas quod reiciendis
        sed sint voluptatibus. Ab adipisci asperiores doloremque dolores, est hic itaque molestiae suscipit! Dolorem,
        hic mollitia!
      </div>
      <div>Atque corporis dolor mollitia quis quisquam temporibus ullam voluptate voluptatum? Eius facere laboriosam
        magnam perspiciatis quia sequi similique tempora! Cumque doloribus ex impedit nostrum quam quia ratione tempora
        ullam vitae.
      </div>
      <div>Consequuntur hic libero magni quidem reprehenderit. Aliquam amet animi autem cum debitis enim, et ex
        excepturi facilis fugiat labore magnam nobis nulla pariatur quam repellendus sapiente similique unde velit
        veniam?
      </div>
      <div>Deserunt esse fuga id labore laudantium nobis quia tenetur vel? Architecto beatae delectus doloribus dolorum
        ducimus eius, fuga maxime molestias nobis pariatur, placeat quis quod recusandae, soluta vero? Ea, officia.
      </div>
      <div>A aliquam aut blanditiis cumque, delectus id placeat quam quos vitae? At consectetur dicta dolore eligendi,
        enim ex illum ipsa nam nesciunt non sint veniam veritatis voluptates? Aperiam hic, voluptates.
      </div>
      <div>Adipisci amet error eum ex explicabo iste mollitia officiis, totam voluptatum! Accusamus alias aliquid, animi
        aut est exercitationem iusto laborum nemo nisi odio possimus recusandae reiciendis suscipit temporibus tenetur
        vero.
      </div>
      <div>Aut dicta est explicabo inventore praesentium provident velit? Autem distinctio exercitationem modi nulla
        praesentium reprehenderit vel! Blanditiis corporis ea earum ipsa ullam. Itaque molestiae neque possimus quia
        quis rem sed?
      </div>
      <div>Accusamus corporis eveniet fugit illo ipsum quo, sed veniam! Ab dolores ducimus ea, esse est hic id incidunt
        itaque iusto magni modi nihil odio quaerat quibusdam tempora vero voluptatibus voluptatum?
      </div>
      <div>Adipisci aspernatur autem consectetur cumque dolorem eaque eligendi enim et expedita explicabo fuga fugit
        impedit in incidunt ipsa maxime, nesciunt nihil nulla omnis possimus qui quod reiciendis tenetur voluptate
        voluptatum.
      </div>
      <div>Aliquam at aut consectetur corporis cupiditate, debitis deleniti dolor dolore doloribus eaque facilis fuga,
        fugiat harum iste iusto laboriosam magni natus nisi odit, quo saepe sequi sint tenetur veritatis voluptates!
      </div>
      <div>Beatae cumque cupiditate eum harum inventore iusto magni nihil non omnis placeat, porro provident quae
        quisquam sed velit! Ab dolore ea nemo nulla placeat ratione, repellat sed totam. Obcaecati, sit.
      </div>
      <div>Architecto culpa, deleniti eligendi, enim excepturi expedita impedit ipsum, iure quam quisquam temporibus
        vitae voluptate? Alias aperiam dicta modi nam natus, rerum tenetur? Officia, sunt suscipit. Animi cupiditate
        optio porro!
      </div>
      <div>Aut doloribus dolorum enim, nostrum perspiciatis sapiente sint vitae. Ab assumenda commodi consequuntur
        deserunt, dignissimos, distinctio enim est, eum impedit iure laborum natus non placeat rem suscipit voluptas
        voluptates? Molestiae?
      </div>
      <div>Ab accusamus aliquid animi aspernatur commodi dolor dolore, dolores, eos error facere facilis id ipsa nam
        nemo neque nulla quod repudiandae sapiente voluptate voluptatum! Deserunt fuga illum obcaecati repellat vitae!
      </div>
    </div>
    <script>
        let btnE = document.querySelector('#btn');
        btnE.addEventListener('click',function(){
          alert('点击了按钮2')
        })
        let spanE = document.querySelector('span');
        spanE.addEventListener('mouseover',function (){
          console.log('该标题被Xxx用户查看1次');
        })
        window.addEventListener('scroll',function (){
          console.log('页面被滚动了');
        })
        window.addEventListener('resize',function (){
          console.log('页面被调整了');
        })
        document.addEventListener('visibilitychange',function (){
          if(document.visibilityState === 'hidden'){
            console.log('用户离开了页面');
          }else{
            console.log('用户返回了页面');
          }
        })
    </script>
</body>
</html>